<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*<!-- 接口伪类选择器是匹配父元素中 第一个元素| 第二个元素 -->*/
        .box:first-child {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        /*.box:nth-child(2) {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }*/

        /* 为什么这个选择器不生效 */
        .box:last-child {
            /*width: 100px;*/
            /*height: 100px;*/
            color: red;
            background-color: pink;
        }

        /* 这个选择器就可以生效 */
        .box span:last-child {
            /*width: 100px;*/
            /*height: 100px;*/
            color: red;
            background-color: pink;
        }
    </style>
</head>
<body>

<div class="box">盒子1</div>
<div class="box">盒子2<span>文本1</span> <span>文本2</span></div>
<div id="nav">
    <ul>
        <li>首页</li>
        <li>产品</li>
    </ul>
</div>

<script>
    // 1.getElementsByClassName 根据类名获取某些元素集合
    var boxes = document.getElementsByClassName('box');
    console.log(boxes);


    // 2.document.querySelector('选择器') 返回指定选择器的第一个元素对象
    // 切记 里面的选择器需要加符号 |   类选择器  .box  id选择器 #id  标签选择器 ul
    // querySelector<E extends Element = Element>(selectors: string): E | null;
    var firstBox = document.querySelector('.box');
    console.log(firstBox);

    var nav = document.querySelector('#nav');
    console.log(nav)

    var li = document.querySelector('li');
    console.log(li)

    // 猜测 选择器可以组合
    var element = document.querySelector('.box span');
    console.log(element)


    // 3.querySelectorAll()返回指定选择器的素有元素对象集合
    //  | 与querySelector区别在于, 前者获取第一个元素对象, 后者获取元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);

    var lastBox = document.querySelectorAll('.box:nth-child(2)');
    console.log(lastBox);
</script>

</body>
</html>
